<template>
    <div class="content">
        <el-row>
            <el-col :md="12" class="tree">
                <el-tree style="max-width: 600px" :data="treeData" :props="props" :expand-on-click-node="false"
                    v-loading="loading" element-loading-text="数据加载中...">
                    <template #default="{ node, data }">
                        <span class="custom-tree-node">
                            <el-icon class="menuIcon">
                                <component :is="data.icon" />
                            </el-icon>
                            <span>{{ node.label }}</span>
                            <span class="operation">
                                <el-button size="small" text type="primary" plain @click="addMenu(node.data.menuId)"
                                    :icon="Plus">添加</el-button>
                                <el-button size="small" text type="primary" plain @click="editMeun(node.data)"
                                    :icon="Edit">修改</el-button>
                                <el-popconfirm title="请确认执行删除操作?" @confirm="deleteMeun(node.data.menuId)">
                                    <template #reference>
                                        <el-button size="small" text type="primary" plain
                                            v-show="node.childNodes.length === 0" :icon="Delete">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </span>
                        </span>
                    </template>
                </el-tree>
            </el-col>
            <el-col :md="12">
                <el-form :model="form" label-width="auto" ref="ruleFormRef" :rules="rules">
                    <el-form-item label="菜单类型" prop="type">
                        <el-select clearable v-model="form.type" placeholder="请选择菜单类型">
                            <el-option label="主目录" value="0" />
                            <el-option label="菜单" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="菜单名称" prop="name">
                        <el-input clearable v-model="form.name" placeholder="请输入菜单名称" />
                    </el-form-item>
                    <el-form-item label="菜单标题" prop="title">
                        <el-input clearable v-model="form.title" placeholder="请输入菜单标题" />
                    </el-form-item>
                    <el-form-item label="菜单路径" prop="path">
                        <el-input clearable v-model="form.path" placeholder="请输入路径" />
                    </el-form-item>
                    <el-form-item label="上级菜单" v-if="form.parentId !== '0'">
                        <el-tree-select v-model="form.parentId" :data="treeData"
                            :props="{ label: 'title', value: 'menuId' }" :render-after-expand="false"
                            style="width: 100%" check-strictly placeholder="请选择上级菜单" clearable />
                    </el-form-item>
                    <el-form-item label="菜单图标">
                        <ElIconPicker v-model="form.icon"></ElIconPicker>
                    </el-form-item>
                    <el-form-item label="菜单排序">
                        <el-input-number v-model="form.sort" :min="0" />
                    </el-form-item>
                </el-form>
                <div class="dialog-footer">
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="saveMenu">{{ flag ? '新增' : '修改' }}</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Plus, Delete, Edit } from '@element-plus/icons-vue'
import api from "@/api"
import { ElMessage } from 'element-plus'
import ElIconPicker from '@/components/el-icon-picker.vue';


const loading = ref(false)
const ruleFormRef = ref()
const props = {
    children: 'children',
    label: 'title'
}
const flag = ref(true)
const treeData = ref()
const form = ref({ sort: 0 })
const rules = ref({
    type: [
        { required: true, message: '请选择菜单类型', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
    ],
    title: [
        { required: true, message: '请输入菜单标题', trigger: 'blur' },
    ],
    path: [
        { required: true, message: '请输入路径', trigger: 'blur' },
    ]
})

const getTreeData = async () => {
    loading.value = true
    const res = await api.get('/author/menu/menuList')
    if (res.data.code === 200) {
        treeData.value = res.data.data;
    } else {
        ElMessage.error(res.data.msg)
    }
    loading.value = false
}
const saveMenu = () => {
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            let url
            if (flag.value) {
                url = '/author/menu/add'
            } else {
                url = '/author/menu/edit'
            }
            const res = await api.post(url, form.value)
            if (res.data.code === 200) {
                ElMessage.success(res.data.msg)
                form.value = { sort: 0 }
                getTreeData()
            } else {
                ElMessage.error(res.data.msg)
            }
        }
    })
}

const reset = () => {
    form.value = { sort: 0 }
    flag.value = true
}

const addMenu = (menuId) => {
    form.value = { parentId: menuId, sort: 0 }
    flag.value = true
}

const editMeun = (data) => {
    form.value = data
    flag.value = false
}

const deleteMeun = async (menuId) => {
    const res = await api.post('/author/menu/delete', [menuId])
    if (res.data.code === 200) {
        ElMessage.success(res.data.msg)
        getTreeData()
    } else {
        ElMessage.error(res.data.msg)
    }
}
onMounted(() => {
    getTreeData()
})

</script>
<style scoped lang="less">
.tree {
    border-right: 0.5px solid var(--boder-color);
}

.el-col {
    padding: 10px;
}

.custom-tree-node {
    display: flex;
    align-items: center;
    justify-content: center;

    .menuIcon {
        margin-right: 5px;
    }
}

.operation {
    margin-left: 20px;
}
</style>